<template>
  <div class="deepseek-container">
    <h1>DeepSeek 对话页面</h1>
    <div class="chat-box">
      <!-- 这里可以添加对话框组件 -->
      <div v-if="messages.length === 0" class="welcome-message">
        欢迎使用 LMDeepSeek！请开始您的对话。
      </div>
      <div
        v-for="(message, index) in messages"
        :key="index"
        :class="['message', message.role]"
      >
        <img
          :src="getAvatar(message.role)"
          :alt="`${message.role} avatar`"
          class="avatar"
        />
        <div v-if="message.role === 'system' && message.content ==''" class="loading"></div>
        <div v-else class="content">{{ message.content }}</div>
      </div>
    </div>
    <div class="input-area">
      <input
        v-model="userInput"
        @keyup.enter="sendMessage"
        placeholder="输入您的消息..."
      />
      <button @click="sendMessage">发送</button>
    </div>
  </div>
</template>

<script>
import OpenAI from "openai";
export default {
  name: "DeepSeekIndex",
  data() {
    return {
      userInput: "",
      messages: [
        // {
        //   role: "system",
        //   content: "",
        // },
        // {
        //   role: "user",
        //   content: "Hello! How can I assist you today?",
        // },
      ],
    };
  },
  methods: {
    async sendMessage() {
      this.messages.push(
        {
          role: "user",
          content: this.userInput,
        },
        {
          role: "system",
          content: "",
        }
      );
      const userInput = this.userInput;
      this.userInput = "";
      const openai = new OpenAI({
        baseURL: "https://api.deepseek.com",
        apiKey: "your key",
        dangerouslyAllowBrowser: true,
      });
      const completion = await openai.chat.completions.create({
        messages: [{ role: "user", content: userInput }],
        model: "deepseek-chat",
        stream: true,
      });
      let last = this.messages.length - 1;
      let content = "";
      for await (const chunk of completion) {
        content += chunk.choices[0].delta?.content || "";
        this.messages[last].content = content;
      }
    },
    getAvatar(role) {
      return role === "user"
        ? "/src/assets/user-avatar.png"
        : "/src/assets/deepseek-avatar.png";
    },
  },
};
</script>

<style scoped>
.deepseek-container {
  max-width: 100%;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  height: 80vh; /* 铺满整个窗口 */
  display: flex;
  flex-direction: column;
}

.chat-box {
  flex: 1; /* 铺满剩余空间 */
  overflow-y: scroll;
  border-bottom: 1px solid #ccc;
  padding: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.message {
  display: flex;
  align-items: flex-start;
  margin-bottom: 10px;
}

.message.user {
  justify-content: flex-end;
  flex-direction: row-reverse; /* 用户消息反向排列 */
}

.message.system {
  justify-content: flex-start;
}

.avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 10px;
}

.message.user .avatar {
  margin-left: 10px;
  margin-right: 0;
}

.content {
  max-width: 70%;
  padding: 10px;
  border-radius: 8px;
  background-color: #007bff;
  color:#ffffff
}

.message.user .content {
  background-color: #007bff;
  color: white;
  margin-right: 10px; /* 用户消息内容与边界的距离 */
}
.message.system .content {
  margin-left: 10px; /* AI助手消息内容与边界的距离 */
  text-align: left;
}
/* 确保用户消息整体靠右对齐 */
.message.user {
  align-self: flex-end;
}
/* 确保系统消息整体靠左对齐 */
.message.system {
  align-self: flex-start;
}
.input-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}

.input-area input {
  flex: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.input-area button {
  padding: 10px 20px;
  border: none;
  background-color: #007bff;
  color: white;
  border-radius: 4px;
  cursor: pointer;
}

.input-area button:hover {
  background-color: #0056b3;
}
.welcome-message {
  text-align: center;
  color: #aaa;
}
.loading {
    display: inline-block;
    font-size: 20px; /* 根据需要调整大小 */
    position: relative;
}

.loading::after {
    content: '...';
    position: absolute;
    right: -1em;
    top: 0;
    animation: loadingDots 1.5s steps(5, end) infinite;
}

@keyframes loadingDots {
    0%, 20% {
        content: '...';
    }
    40% {
        content: '..';
    }
    60% {
        content: '.';
    }
    80%, 100% {
        content: '';
    }
}
</style>